<div class="periodic-container">
  <div class="category-selector">
    <app-atom-category *ngFor="let category of categories"
                       class="category"
                       [type]="category.type"
                       [selected]="selectCategory === category.type"
                       [name]="category.displayName"
                       (enter)="select($event)"></app-atom-category>
  </div>

  <div class="periodic-grid">
    <app-atom-details
      class="atom-details"
      [class.show]="currentAtom !== null"
      [data]="currentAtom"
    ></app-atom-details>

    <ng-container *ngIf="(atoms$ | async) as atoms">
      <app-atom
        *ngFor="let atom of atoms"
        class="periodic-atom-{{ atom.number }}"
        [data]="atom"
        [selectedCategory]="selectCategory"
        [metalSelected]="metalClass"
        (hoverAtom)="showAtomDetails($event)"
      ></app-atom>
    </ng-container>
    <app-atom class="periodic-atom-57-71 atom-placeholder" [data]="lantAtomGroup"></app-atom>
    <app-atom class="periodic-atom-89-103 atom-placeholder" [data]="actinideAtomGroup"></app-atom>
  </div>
</div>
